/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React, { memo } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';

// 默认关闭按钮颜色
const DEFAULT_CLOSE_BUTTON_COLOR = '#0F294D';

// 固定头部属性
export interface AdaptiveSheetFixedHeaderProps {
  title?: string;

  height?: number;

  topInset?: number;

  leftButton?: React.ReactNode;

  rightButton?: React.ReactNode;

  onLeftPress?: () => void;

  onRightPress?: () => void;

  titleStyle?: StyleProp<TextStyle>;

  containerStyle?: StyleProp<ViewStyle>;

  leftButtonStyle?: StyleProp<ViewStyle>;

  rightButtonStyle?: StyleProp<ViewStyle>;

  closeButtonColor?: string;
}

const DefaultCloseIcon: React.FC<{ color?: string }> = ({ color = DEFAULT_CLOSE_BUTTON_COLOR }) => <Text style={[styles.closeIcon, { color }]}>×</Text>;

// 固定头部组件
const AdaptiveSheetFixedHeaderComponent: React.FC<AdaptiveSheetFixedHeaderProps> = ({
  title,
  height = 52,
  topInset = 0,
  leftButton,
  rightButton,
  onLeftPress,
  onRightPress,
  titleStyle,
  containerStyle,
  leftButtonStyle,
  rightButtonStyle,
  closeButtonColor = DEFAULT_CLOSE_BUTTON_COLOR,
}) => {
  // 总高度 = 基础高度 + 顶部安全区域
  const totalHeight = height + topInset;

  return (
    <View style={[styles.container, { height: totalHeight, top: 0, paddingTop: topInset }, containerStyle]}>
      {/* 左侧按钮 */}
      <TouchableOpacity onPress={onLeftPress} style={[styles.leftButton, leftButtonStyle]} activeOpacity={0.7}>
        {leftButton || <DefaultCloseIcon color={closeButtonColor} />}
      </TouchableOpacity>

      {/* 标题 */}
      <View style={styles.titleContainer}>
        <Text style={[styles.title, titleStyle]} numberOfLines={1}>
          {title}
        </Text>
      </View>

      {/* 右侧按钮 */}
      <View style={styles.rightButtonContainer}>
        {rightButton && (
          <TouchableOpacity onPress={onRightPress} style={[styles.rightButton, rightButtonStyle]} activeOpacity={0.7}>
            {rightButton}
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const AdaptiveSheetFixedHeader = memo(AdaptiveSheetFixedHeaderComponent);
AdaptiveSheetFixedHeader.displayName = 'AdaptiveSheetFixedHeader';

export default AdaptiveSheetFixedHeader;

const styles = StyleSheet.create({
  closeIcon: {
    fontSize: 48,
    fontWeight: '300',
    lineHeight: 40,
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ffffff',
    borderTopLeftRadius: 8, // 左上圆角
    borderTopRightRadius: 8, // 右上圆角
  },
  leftButton: {
    alignItems: 'center',
    height: 48,
    justifyContent: 'center',
    marginRight: 8,
    width: 48,
  },
  rightButton: {
    alignItems: 'center',
    height: 48,
    justifyContent: 'center',
    width: 48,
  },
  rightButtonContainer: {
    marginLeft: 8,
  },
  title: {
    color: '#000',
    fontSize: 18,
    fontWeight: '600',
  },
  titleContainer: {
    flex: 1,
    justifyContent: 'center',
  },
});
